{% extends 'bases/base.html' %}
{% load static %}

{% block content %}
<div class="container">
	<div class="row">
		<div class="col mt-3">
			<form method="POST" id="registration_form" action="/register/">
				{% csrf_token %}
				<input type="hidden" name="g-recaptcha-response" id='recaptcha'>
				{% for item in form %}
				<p>{{item.label}}: {{item}}</p>
				{% endfor %}
				<button class="btn btn-success" type="submit">Зарегистрироваться</button>
			</form>
		</div>
	</div>
	<div class="row">
		<div class="col mt-3">
			{% if form.errors %}
			<div class="alert alert-danger">
				<ul>
					{% for field, errors in form.errors.items %}
					{% for error in errors %}
					<li>{{ error }}</li>
					{% endfor %}
					{% endfor %}
				</ul>
			</div>
			{% endif %}
		</div>
	</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://www.google.com/recaptcha/api.js?render={{site_key}}"></script>

<script>
grecaptcha.ready(function() {
  $('#registration_form').submit(function(e){
      var form = this;
      e.preventDefault()
      grecaptcha.execute('{{site_key}}', {action: 'registration_form'}).then(function(token) {
          $('#recaptcha').val(token)
          form.submit()
      });
  })
});
</script>
{% endblock %}